<template>
  <div class="echarts">
    <div
      id="echartszgwthj"
      style="width: 330px; height: 220px;"
    ></div>
  </div>
</template>
 
<script>
// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/bar");
// 引入饼状图组件
require("echarts/lib/chart/pie");
require("echarts/lib/chart/line");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend");
export default {
  data() {
    return {
      currentObj: [],
      currentObj1: [],
    };
  },
  props: {
    // echartObj: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  created() {
    // this.$nextTick(() => {
    //   this.loadEchart();
    // });
  },
  mounted() {
    // let _this = this;
    // window.onresize = function () {
    //   _this.myChart.resize();
    // };
  },
  methods: {
    loadEchart(res) {
      console.log(res);
      this.currentObj = res;
      var Data = [];
      var Data1 = [];
      var Data2 = [];
      let arr = 0;
      this.currentObj
        .reverse()
        .slice(0, 10)
        .reverse()
        .forEach((item) => {
          Data.push(item.lb);
          Data1.push(item.sl);
          Data2.push(item.num);
          arr += item.sl;
        });
      this.myChart = echarts.init(document.getElementById("echartszgwthj"));
      this.myChart.setOption({
        title: {
          left: "center",
          text: "整改问题环节",
          textStyle: {
            color: "white", //字体颜色
            fontSize: 14,
          },
        },
        color: ["#027aff"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          left: 50,
          data: Data,
          textStyle: {
            fontSize: 12, //字体大小
            color: "white", //字体颜色
          },
        },
        grid: {
          top: 50,
          left: "left",
          right: "5%",
          bottom: "3%",
          top:"55",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: Data,
          axisLabel: {
            interval: 0,
            // rotate: 20,
            textStyle: {
              color: "white",
              fontSize: 10,
            },
          },
           //设置轴线的属性
          axisLine:{
              lineStyle:{
                  color:'white',
                  width:2,//这里是为了突出显示加上的
              }
          } 
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "white",
              fontSize: 10,
            },
          },
           //设置轴线的属性
          axisLine:{
              lineStyle:{
                  color:'white',
                  width:2,//这里是为了突出显示加上的
              }
          } 
        },
        series: [
          {
          name: "数量",
            type: "bar",
            data: Data1,
            itemStyle: {
              normal: {
                color:function(params){
                    var colorlist = ['#DA251D','#E67716','#FBC300','#0c7ef2','#DA251D','#E67716'];
                    return colorlist[params.dataIndex];
                }
              },
            },
             label: {
              normal: {
                show: true,
                position: "top", //显示方向
                textStyle: {
                  fontWeight: 300,
                  color:"white",
                  fontSize: 14, //文字的字体大小
                },
                formatter: function (v) {
                  //console.log(v)
                  var val = v.data;
                  //return val + '\n'+ val/arr * 100 +'%';
                  return (
                    val + "\n" + (Math.round((val / arr) * 10000) / 100.0 + "%") // 小数点后两位百分比
                  );
                },
                color: function (params) {
                  var colorlist = ["#DA251D", "#E67716", "#FBC300", "#0c7ef2"];
                  return colorlist[params.dataIndex];
                },
              },
            },
          },
        ],
      });
    },
  },
};
</script>
 
<style lang='less' scoped>
</style>